﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/Content/style.css" />
    <link href="~/assets/css/codemirror.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/assets/css/ace.min.css" />
    <link rel="stylesheet" href="~/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="~/layui/css/layui.css" />
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="~/assets/css/ace-ie.min.css" />
    <![endif]-->
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/assets/js/bootstrap.min.js"></script>
    <script src="~/assets/js/typeahead-bs2.min.js"></script>
    <script src="~/assets/js/jquery.dataTables.min.js"></script>
    <script src="~/assets/js/jquery.dataTables.bootstrap.js"></script>
    <script src="~/assets/layer/layer.js" type="text/javascript"></script>
    <script src="~/assets/laydate/laydate.js" type="text/javascript"></script>
    <script src="~/layui/layui.js" type="text/javascript"></script>
    <script src="~/Timejs/Time.js" type="text/javascript"></script>
    <title>系统栏目</title>
</head>

<body>
    <div class="border clearfix">
        <span class="l_f">
            <a href="javascript:ovid()" id="administrator_add" class="btn btn-warning"><i class="fa fa-plus"></i> 添加管理员</a>
        </span>
    </div>
    <div class="Columns_style margin">
        <table class="layui-hide" id="test" lay-filter="demo"></table>

        <script id="barDemo" type="text/html">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

    </div>
    <div id="add_administrator_style" class="add_menber" style="display:none">
        <form id="form-admin-add">
            <input type="hidden" value="" placeholder=" " id="ID" name="ID" nullmsg="" />
            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>排序：</label>
                <div class="formControls">
                    <input type="text" class="input-text" value="" placeholder="" id="Sort" name="Sort" nullmsg="排序不能为空" />
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>栏目名称：</label>
                <div class="formControls">
                    <input type="text" placeholder="栏目名称" id="ColumnName" name="ColumnName" autocomplete="off" value="" class="input-text" nullmsg="栏目名称不能为空" />
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="form-label "><span class="c-red">*</span>等级：</label>
                <div class="formControls ">
                    <input type="text" placeholder="等级" autocomplete="off" class="input-text Validform_error" nullmsg="等级不能为空！" id="Grade" name="Grade" />
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>

            <div class="form-group">
                <label class="form-label "><span class="c-red">*</span>父级ID：</label>
                <div class="formControls ">
                    <input type="text" class="input-text" value="" placeholder="" id="ParentID" name="ParentID" nullmsg="父级ID不能为空" />
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="form-label "><span class="c-red">*</span>链接地址：</label>
                <div class="formControls ">
                    <input type="text" class="input-text" value="" placeholder="" id="UrlAddress" name="UrlAddress" nullmsg="链接地址不能为空" />
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>
            <div class="form-group">
                <label class="form-label">说明：</label>
                <div class="formControls">
                    <textarea name="Context" cols="" rows="" class="textarea" placeholder="说点什么...100个字符以内" dragonfly="true" onkeyup="checkLength(this);"></textarea>
                    <span class="wordage">剩余字数：<span id="sy" style="color:Red;">100</span>字</span>
                </div>
                <div class="col-4"> </div>
            </div>
            <div>
                <input class="btn btn-primary radius" type="button" id="Add_ColumnInfo" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" />
            </div>
        </form>
    </div>
</body>
</html>
<script>
    $(function () {
        var oTable1 = $('#sample-table').dataTable({
            "aaSorting": [],//默认第几个排序
            "bStateSave": false,//状态保存
            //"dom": 't',
            "bFilter": false,
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                { "orderable": false, "aTargets": [0, 1, 2, 3, 4, 5, 6, 7] }// 制定列不参与排序
            ]
        });
        $('table th input:checkbox').on('click', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });
    })
    /*栏目-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用该栏目吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="fa fa-close bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">停用</span>');
            $(obj).remove();
            layer.msg('停用!', { icon: 5, time: 1000 });
        });
    }

    /*栏目-启用*/
    function member_start(obj, id) {
        layer.confirm('确认要启用该栏目吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="fa fa-check bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">启用</span>');
            $(obj).remove();
            layer.msg('启用!', { icon: 6, time: 1000 });
        });
    }
    /*店铺-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', { icon: 0, }, function (index) {
            $(obj).parents("tr").remove();
            layer.msg('已删除!', { icon: 1, time: 1000 });
        });
    }
    //添加栏目表信息
    $('#administrator_add').on('click', function () {
        //打开时初始化赋值为空  表达ID为空时时进行添加操作
        $("#form-admin-add input").attr("disabled", false).val(" ");
        $(".textarea").attr("disabled", false).val(" ");
        $("#Add_ColumnInfo").css("display", "block");
        $("#Add_ColumnInfo").val("提交");
        layer.open({
            type: 1,
            title: '添加栏目表信息',
            area: ['700px', ''],
            shadeClose: false,
            content: $('#add_administrator_style'),
        });
    })
    // //表单验证提交
    //$("#form-admin-add").Validform({
    //    tiptype: 2,
    //    ajaxPost: true,
    //    callback: function (data) {
    //        if (data.status == "y") {
    //            layer.msg("成功", { icon: 1, time: 1000 }, function () {
    //                location.reload();//刷新页面
    //            });
    //        }
    //        else {
    //            layer.msg("失败", { icon: 0, time: 3000 });
    //        }
    //        var index = parent.$("#iframe").attr("src");
    //        parent.layer.close(index);
    //    }

    //});
</script>
<script>
    layui.use('table', function () {
        var table = layui.table
        ,form = layui.form;
        table.render({
            elem: '#test'
            , url: '/ColumnInfo/GetAllColumnInfo/'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                  {type:'checkbox'}
                , { field: 'ID', width: 60,align:'center', title: 'ID', sort: true }
                , { field: 'Sort',align:'center', width: 70, title: '排序' }
                , { field: 'ColumnName', width: 130, title: '栏目名称',align:'center' }
                , { field: 'ParentID', width: 80,align:'center', title: '父级ID', sort: true }
                , { field: 'Grade', width: 140, title: '等级',align:'center' }
                , { field: 'Context', title: '说明',align:'center', width: '10%', minWidth: 70 } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , { field: 'CreateTime',width:160,align:'center',templet:"<div>{{Format(d.CreateTime, 'yyyy-MM-dd hh:mm:ss')}}</div>",title: '添加时间', sort: true }
                , { field: 'States', width: 90, align: 'center', title: '状态' }
                , { field: 'UrlAddress', width: 130, title: '链接地址', align: 'center' }
                , {fixed: 'right', width:195, align:'center', toolbar: '#barDemo'}
            ]]
            , page: true
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var ColumnInfo = obj.data;
            var ID=ColumnInfo.ID;
            if (obj.event === 'detail') {
                //查看操作
                //传入一个data对象 调用方法将数据代替进表单值
                HtmlColumnInfo(ColumnInfo);
                $("#form-admin-add input").attr("disabled", true);
                $(".textarea").attr("disabled", true);
                $("#Add_ColumnInfo").css("display", "none");
                layer.open({
                    type: 1,
                    title: '添加栏目表信息',
                    area: ['700px', ''],
                    shadeClose: false,
                    content: $('#add_administrator_style'),
                });
            } else if(obj.event === 'del'){
                //删除操作
            } else if (obj.event === 'edit') {
                //编辑操作
                //传入一个data对象 调用方法将数据代替进表单值
                HtmlColumnInfo(ColumnInfo);
                $("#form-admin-add input").attr("disabled", false);
                $(".textarea").attr("disabled", false);
                $("#Add_ColumnInfo").css("display", "block");
                $("#Add_ColumnInfo").val("保存修改");
                layer.open({
                    type: 1,
                    title: '添加栏目表信息',
                    area: ['700px', ''],
                    shadeClose: false,
                    content: $('#add_administrator_style'),
                });
             }
        });
    });
    //传入一个data对象 调用方法将数据代替进表单值
    function HtmlColumnInfo(ColumnInfo) {
        //在做修改时要给ID赋值 利于判断后续是做添加还是修改操作
        $("#ID").val(ColumnInfo.ID);
        $("#Sort").val(ColumnInfo.Sort);
        $("#ColumnName").val(ColumnInfo.ColumnName);
        $("#ParentID").val(ColumnInfo.ParentID);
        $("#Grade").val(ColumnInfo.Grade);
        $(".textarea").val(ColumnInfo.Context);
        $("#UrlAddress").val(ColumnInfo.UrlAddress);
    }
    //添加栏目表信息   添加与修改共用 通过ID判别
    $("#Add_ColumnInfo").click(function () {
        var ColumnInfo = {};
        //通过ID是否有值来判断是要做添加还是修改操作
        ColumnInfo.ID=$("#ID").val();
        ColumnInfo.Sort = $("#Sort").val();
        ColumnInfo.ColumnName = $("#ColumnName").val();
        ColumnInfo.ParentID = $("#ParentID").val();
        ColumnInfo.Grade = $("#Grade").val();
        ColumnInfo.Context = $(".textarea").val();
        ColumnInfo.UrlAddress=$("#UrlAddress").val();
        $.ajax({
            url: "/ColumnInfo/AddColumnInfo",
            data: ColumnInfo,
            type: "post",
            success: function (result) {
                if (result.Success) {
                    layer.alert(''+result.Context+'', {
                        title: '提示框',
                        icon: 1,
                    });
                    location.reload();//刷新页面
                }
                else {
                    alert("失败！");
                }
            }
        })
    })
</script>
